<template>
  <view class="page">
    <view class="step-1" v-show="step == 1">
      <uni-section title="基本信息" type="line"></uni-section>
      <uni-forms :label-width="100" :rules="rules" :model="form" ref="form">
        <uni-forms-item label="标题" name="title" required>
          <uni-easyinput v-model="form.title" placeholder="请输入" />
        </uni-forms-item>
        <uni-forms-item label="考评员" required name="user1">
          <view class="select">
            <view class="value" @click="openSearchSelect('user1')">{{ form.user1 ? form.user1.name : "请选择" }} </view>
            <view class="clear" v-if="form.user1" @click="form.user1 = ''">清 除</view>
          </view>
        </uni-forms-item>
        <uni-forms-item label="街道" required name="street">
          <view class="select">
            <view class="value" @click="openSearchSelect('street')">{{ form.street ? form.street.name : "请选择" }} </view>
            <view class="clear" v-if="form.street" @click="form.street = ''">清 除</view>
          </view>
        </uni-forms-item>
        <uni-forms-item label="街道管理员">
          {{ form.street ? form.street.user_name : "请选择街道" }}
        </uni-forms-item>
        <uni-forms-item label="考评时间" required name="time">
          <uni-datetime-picker type="date" v-model="form.time" placeholder="请选择" />
        </uni-forms-item>
        <uni-forms-item label="整改限时" required name="expire_time">
          <uni-datetime-picker type="date" v-model="form.expire_time" placeholder="请选择" />
        </uni-forms-item>
        <uni-forms-item label="村" required name="village">
          <view class="select">
            <view class="value" @click="openSearchSelect('village')">{{ form.village ? form.village.name : "请选择" }}
            </view>
            <view class="clear" v-if="form.village" @click="form.village = ''">清 除</view>
          </view>
        </uni-forms-item>
        <uni-forms-item label="村管理员">
          {{ form.village ? form.village.user_name : "请选择村" }}
        </uni-forms-item>
        <uni-forms-item label="转接限时" required name="move_time">
          <uni-datetime-picker type="date" v-model="form.move_time" placeholder="请选择" />
        </uni-forms-item>
        <uni-forms-item label="审核员" required name="user2">
          <view class="select">
            <view class="value" @click="openSearchSelect('user2')">{{ form.user2 ? form.user2.name : "请选择" }} </view>
            <view class="clear" v-if="form.user2" @click="form.user2 = ''">清 除</view>
          </view>
        </uni-forms-item>
      </uni-forms>
      <button type="primary" @click="next2">下一步</button>
    </view>
    <view class="step-2" v-show="step == 2">
      <uni-section title="整改问题" type="line"></uni-section>
      <view class="year-period">
        <uni-list>
          <uni-list-item :title="form.year ? form.year.name : '请选择年份'" clickable showArrow
            @click="openSearchSelect('year')" />
          <uni-list-item :title="form.period ? form.period.name : '请选择期数'" clickable showArrow
            @click="openSearchSelect('period')" />
        </uni-list>
      </view>
      <!-- 标准 -->
      <view class="standard">
        <view class="item" v-for="(item, index) in form.standard">
          <view class="title">
            <view class="text">{{ index + 1 }}: {{ item.title }}</view>
            <view class="score">({{ item.score }}分)</view>
          </view>
          <view class="intro">{{ item.content }}</view>
          <view class="switch">
            <view class="title">开启整改</view>
            <switch style="transform: scale(0.8)" :checked="item.state ? true : false"
              @change="(e) => (item.state = e.detail.value ? 1 : 0)" />
          </view>
          <view class="upload" v-if="item.state">
            <button type="primary" size="mini" @click="uploadBefore(item)">上传</button>
            <button type="primary" size="mini" @click="addImgIssue(item, item.img_list)"
              v-if="item.img_list.length">一键问题设置</button>
          </view>
          <view class="img-list" v-if="item.state">
            <view class="item" v-for="(img, imgIndex) in item.img_list">
              <view class="title">
                序号 : {{ imgIndex + 1 }}
                <view class="issue">
                  {{ img.issue }}
                  <uni-icons type="compose" size="18" @click="addImgIssue(item, [img])"></uni-icons>
                </view>
              </view>
              <view class="img">
                <view class="left" :style="{ 'background-image': ' url(' + viteImgSrc + img.img_before_thumb + ')' }"
                  @click="previewImage(viteImgSrc + img.img_before)">
                  <view class="name" @click.stop="openEditImgTitle(img)">
                    <view class="label">{{ img.img_before_title }}</view>
                    <uni-icons type="compose" size="18"></uni-icons>
                  </view>
                  <view class="clear" @click.stop="clearImgBefore(item, imgIndex)">
                    <uni-icons type="close" size="25"></uni-icons>
                  </view>
                </view>
                <view class="right" v-if="img.img_after_thumb"
                  :style="{ 'background-image': ' url(' + viteImgSrc + img.img_after_thumb + ')' }"
                  @click="previewImage(viteImgSrc + img.img_after)">
                  <view class="clear" @click.stop="clearImgAfter(img)">
                    <uni-icons type="close" size="25"></uni-icons>
                  </view>
                </view>
                <view class="right" v-else @click="uploadAfter(img)">
                  <uni-icons type="plusempty" size="30"></uni-icons>
                </view>
              </view>
              <!-- 留言 -->
              <view class="message">
                <view class="item">
                  <uni-easyinput v-model="img.info_before" placeholder="考评员备注"></uni-easyinput>
                </view>
              </view>
              <!-- <view class="switch">
                <view class="title">整改是否通过</view>
                <view class="state">
                  <view class="label error" v-if="img.check_state">不通过</view>
                  <switch style="transform: scale(0.8)" :checked="img.check_state ? false : true"
                    @change="checkStateChange(img, $event)" />
                </view>
              </view>
              <view class="message" v-if="img.check_state">
                <view class="item">
                  <uni-easyinput v-model="img.check_info" placeholder="不通过留言"></uni-easyinput>
                </view>
              </view> -->
            </view>
            <view class="score-count">
              <view class="box">
                <view class="item">扣分<view class="red">{{ item.minus_score }}</view>
                </view>
                <view class="item">得分<view class="red">{{ item.score - item.minus_score }}</view>
                </view>
                <view class="item" @click="openMinusScore(item)">
                  <uni-icons type="compose" size="18"></uni-icons>
                </view>
              </view>
              <view class="box">
                <view class="item">问题<view class="red">{{ item.img_list.length }}</view>
                </view>
                <view class="item">整改<view class="red">{{ item.img_after_count }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="sum-count" v-if="form.standard">
        <view class="box">
          <view class="item">总扣分<view class="red">{{ form.sum_score.minus }}</view>
          </view>
          <view class="item">总得分<view class="red">{{ form.sum_score.sum - form.sum_score.minus }}</view>
          </view>
          <view class="item">总整改得分<view class="red">{{ form.sum_score.after_score }}</view>
          </view>
        </view>
        <view class="box">
          <view class="item">总问题<view class="red">{{ form.sum_score.issue_count }}</view>
          </view>
          <view class="item">总整改<view class="red">{{ form.sum_score.after_issue_count }}</view>
          </view>
        </view>
      </view>
      <view class="handle">
        <button type="primary" @click="next1" size="mini">上一步</button>
        <button type="primary" @click="add" size="mini" :disabled="loading">保 存</button>
        <button type="primary" @click="state1" size="mini" :disabled="loading">提交整改</button>
      </view>
    </view>

    <!-- 下拉框 -->
    <uni-popup ref="select" background-color="#fff" @change="selectChange">
      <view class="select-popup">
        <view class="search">
          <uni-easyinput v-model="select.search" placeholder="请输入标题"></uni-easyinput>
        </view>
        <view class="list" v-if="select.show">
          <radio-group @change="radioChange">
            <label class="item" v-for="(item, index) in filterSearchSelect()">
              <view class="radio">
                <radio :value="index" />
              </view>
              <view class="label">{{ item.name }}</view>
            </label>
          </radio-group>
        </view>
      </view>
    </uni-popup>

    <!-- 扣分 -->
    <uni-popup ref="minusScore" type="dialog">
      <uni-popup-dialog mode="input" title="扣分" placeholder="请输入" @confirm="handleMinusscore"></uni-popup-dialog>
    </uni-popup>

    <!-- 修改图片名称 -->
    <uni-popup ref="editImgTitle" type="dialog">
      <uni-popup-dialog mode="input" :value="imgTitle.val" title="图片名称" placeholder="请输入"
        @confirm="editImgTitle"></uni-popup-dialog>
    </uni-popup>
  </view>
</template>
<script>
// 刚开始检查 添加了一条数据  还没有比对数据
import { getSearchSelect, getYearPeriod, getStandard, addEvaluate, getStreetVillage } from "@/api/evaluate";
import { upload } from "@/api/common";
export default {
  data() {
    return {
      step: 1,
      form: { state: 0 },
      rules: {
        title: { rules: [{ required: true, errorMessage: "请输入标题" }] },
        user1: { rules: [{ required: true, errorMessage: "请选择考评员" }] },
        street: { rules: [{ required: true, errorMessage: "请选择街道" }] },
        time: { rules: [{ required: true, errorMessage: "请选择考评时间" }] },
        expire_time: { rules: [{ required: true, errorMessage: "请选择整改限时" }] },
        village: { rules: [{ required: true, errorMessage: "请选择村" }] },
        move_time: { rules: [{ required: true, errorMessage: "请选择转接限时" }] },
        user2: { rules: [{ required: true, errorMessage: "请选择审核员" }] },
      },
      loading: false,
      select: {
        search: "",
        list: [],
        type: "",
        show: false
      },
      //街道
      street: [],
      //村
      village: [],
      //考评员
      user1: [],
      //审核员
      user2: [],
      // 年份
      year: [],
      // 期数
      period: [],
      // 图片具体问题
      issue: [],
      // 扣分
      minusScore: {
        val: 0,
        check: "",
      },
      // 图片修改名称
      imgTitle: {
        val: '',
        check: "",
      },
      // 图片url
      viteImgSrc: import.meta.env.VITE_IMG_SRC,
      user: {}//登录用户
    };
  },
  watch: {
    "form.year"() {
      for (let i = 0; i < this.form.year.period; i++) {
        this.period.push({ name: "第" + this.changeIntChar(i + 1) + "期", id: "第" + this.changeIntChar(i + 1) + "期" });
      }
      // 搜索标准
      this.getStandard();
    }
  },
  methods: {
    // 选择弹出层
    selectChange(val) {
      this.select.show = val.show;
    },
    // 提交整改
    state1() {
      this.form.state = 1;
      this.add();
    },
    // 清除整改照片
    clearImgAfter(img) {
      uni.showModal({
        title: '提示',
        content: '确认删除吗?',
        success: (res) => {
          if (res.confirm) {
            img.img_after = '';
            img.img_after_thumb = '';
            this.getAfterImgCount();
            this.getSumScore();
          }
        }
      });
    },
    // 清除问题照片
    clearImgBefore(item, index) {
      uni.showModal({
        title: '提示',
        content: '确认删除吗?',
        success: (res) => {
          if (res.confirm) {
            item.img_list.splice(index, 1);
          }
        }
      });
    },
    // 验证图片问题内容是否为空
    checkIssue() {
      let list = this.form.standard;
      if (!list) return { state: 0, info: "细则不能为空" };
      for (let i in list) {
        let item = list[i];
        for (let j in item["img_list"]) {
          let son = item["img_list"][j];
          if (!son.issue) {
            return { state: 0, info: "细则 " + (parseInt(i) + 1) + " 下 , 序号 : " + (parseInt(j) + 1) + " , 问题不能为空" };
          }
        }
      }
      return { state: 1 }
    },
    // 提交
    add() {
      let data = { ...this.form };
      // 年份
      if (!data.year) uni.showToast({ title: "请选择年份", icon: "none" });
      // 期数
      else if (!data.period) uni.showToast({ title: "请选择期数", icon: "none" });
      else if (!this.checkIssue().state) {
        uni.showToast({ title: this.checkIssue().info, icon: "none" });
      } else {
        this.loading = true;
        addEvaluate(data).then(res => {
          uni.showToast({ title: '添加成功' })
          setTimeout(() => {
            this.loading = false;
            uni.redirectTo({ url: "/pages/evaluate/index" });
          }, 1000);
        })
      }
    },
    // 更改整改通过不通过
    checkStateChange(img, e) {
      img.check_state = e.detail.value ? 0 : 1;
      this.getAfterImgCount();
      this.getSumScore();
    },
    // 获取总扣分和总得分还有总整改得分 总问题数和总整改数
    getSumScore() {
      // 总分、总扣分、总整改得分、总问题数、总整改数
      this.form.sum_score = { sum: 0, minus: 0, after_score: 0, issue_count: 0, after_issue_count: 0 };

      this.form.standard.forEach((item) => {
        this.form.sum_score.sum = this.form.sum_score.sum + item.score;
        this.form.sum_score.minus = this.form.sum_score.minus + item.minus_score;

        this.form.sum_score.issue_count = this.form.sum_score.issue_count + item.img_list.length;
        this.form.sum_score.after_issue_count = this.form.sum_score.after_issue_count + item.img_after_count
      })
      // 总整改得分  计算公式 已通过/总张数*整改总分
      if (this.form.sum_score.issue_count) this.form.sum_score.after_score = this.form.sum_score.after_issue_count / this.form.sum_score.issue_count * this.form.year.after_score_sum;
    },
    // 获取整改图片数量
    getAfterImgCount() {
      // 计算标准整改图片数量
      this.form.standard.forEach(item => {
        item.img_after_count = 0;
        item.img_list.forEach(img => {
          if (img.img_after_thumb && !img.check_state) item.img_after_count++;
        })
      })

    },
    // 提交了图片标题
    editImgTitle(val) {
      if (val) {
        this.imgTitle.check.img_before_title = val;
      } else {
        uni.showToast({ title: '修改失败,请输入名称', icon: 'none' });
      }
    },
    // 打开图片输入框
    openEditImgTitle(item) {
      this.imgTitle.check = item;
      this.imgTitle.val = item.img_before_title;
      this.$refs.editImgTitle.open();
    },
    // 提交了扣分
    handleMinusscore(score) {
      this.minusScore.check.minus_score = parseFloat(score);
      this.getSumScore();
    },
    // 打开扣分输入框
    openMinusScore(standard) {
      this.minusScore.check = standard;
      this.$refs.minusScore.open();
    },
    // 预览图片
    previewImage(src) {
      uni.previewImage({ urls: [src] });
    },
    // 上传整改照片
    uploadAfter(img) {
      uni.chooseImage({
        count: 6,
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album"],
        success: (res) => {
          res.tempFilePaths.forEach((item) => {
            upload(item, { compress: 1, thumb: 1 }).then((res) => {
              let file = JSON.parse(res.data).data.file;
              img.img_after = file.path;
              img.img_after_thumb = file.thumb_path;
              this.getAfterImgCount();
              this.getSumScore();
            });
          });
        },
      });
    },
    // 修改问题
    addImgIssue(item, imgs) {
      this.select.issueImg = imgs;
      this.issue = item.issue.map((item) => {
        return { name: item, id: item };
      });
      this.openSearchSelect("issue");
    },
    // 统一修改问题图片名称
    checkMapEditImgTitle(imgIndex, img_list, index1, index2) {
      // 上传完
      if (index1 == index2) {
        // 授权
        uni.authorize({
          scope: 'scope.userLocation',
          success() {
            // 获取经纬度
            uni.getLocation({
              type: 'gcj02',
              success: (res) => {
                const latitude = res.latitude;
                const longitude = res.longitude;
                // 打开地图选择地址
                uni.chooseLocation({
                  latitude: latitude,
                  longitude: longitude,
                  success: (res) => {
                    imgIndex.forEach(item => {
                      img_list[item].img_before_title = res.name;
                    })
                    console.log('位置名称：' + res.name);
                  }
                });
              }
            });
          }
        })

      }
    },
    // 上传实地照片
    uploadBefore(standard) {
      uni.chooseImage({
        count: 6,
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album"],
        success: (res) => {
          let index1 = res.tempFilePaths.length,
            index2 = 0, imgsIndex = [];
          res.tempFilePaths.forEach((item) => {
            upload(item, { compress: 1, thumb: 1 }).then((res) => {
              let file = JSON.parse(res.data).data.file;
              let name = file.name.split(".");
              name.length = name.length - 1;
              let img = {
                img_before: file.path,
                img_before_thumb: file.thumb_path,
                img_before_title: name.join("."),
                check_state: 1, //默认不通过
              };
              imgsIndex.push(standard.img_list.push(img) - 1);
              index2 = index2 + 1;
              this.checkMapEditImgTitle(imgsIndex, standard.img_list, index1, index2);

              this.getAfterImgCount();
              this.getSumScore();
            });
          });
        },
      });
    },
    // 搜索标准
    getStandard() {
      getStandard({ year_period_id: this.form.year.id }).then((res) => {
        let data = res.data;
        for (let i in data) {
          data[i]["state"] = false; //是否开启整改
          data[i]["img_list"] = []; //整改图片列表
          data[i]["minus_score"] = 0; //扣分
          data[i]["issue"] = data[i]["issue"].split(",");
          data[i]['img_after_count'] = 0;//整改图片数量
        }
        this.form.standard = data;

        this.getSumScore();
      });
    },
    // 数字转字符串 1 -> 一
    changeIntChar(i) {
      let c = ["", "一", "二", "三", "四", "五", "六", "七", "八", "九", "十"];
      return c[i];
    },
    // 搜索年份期数
    getYearPeriod() {
      getYearPeriod().then((res) => {
        let data = res.data;
        data.forEach((item) => {
          this.year.push({ name: item.year, id: item.id, period: item.period, after_score_sum: item.after_score_sum });
        });
      });
    },
    // 到第一步
    next1() {
      this.step = 1;
    },
    // 到第二步
    next2() {
      this.$refs.form.validate().then((res) => {
        this.step = 2;
      });
    },
    // 搜索街道、考评员、审核员
    getSearchSelect() {
      getSearchSelect().then((res) => {
        let data = res.data;
        data.street.forEach((item) => {
          this.street.push({ name: item.title, id: item.id, user_name: item.user_name });
        });
        data.user1.forEach((item) => {
          this.user1.push({ name: item.username, id: item.id });
        });
        data.user2.forEach((item) => {
          this.user2.push({ name: item.username, id: item.id });
        });
      });
    },
    // 搜索街道下的村
    getStreetVillage() {
      getStreetVillage({ 'street_id': this.form.street.id }).then(res => {
        let data = res.data;
        this.village = [];
        this.form.village = '';
        data.village.forEach((item) => {
          this.village.push({ name: item.title, id: item.id, user_name: item.user_name });
        });
      })
    },
    // 选择
    radioChange(item) {
      // 选择是问题的时候
      if (this.select.type == "issue") {
        this.select.issueImg.forEach((img) => {
          img.issue = this.select.list[item.detail.value].name;
        });
      } else {
        this.form[this.select.type] = this.select.list[item.detail.value];
        // 选择街道的时候
        if (this.select.type == 'street') this.getStreetVillage();
      }
      this.$refs.select.close();
    },
    // 筛选下拉框选项
    filterSearchSelect() {
      if (!this.select.search) return this.select.list;
      return this.select.list.filter((item) => item.name.includes(this.select.search));
    },
    // 打开搜索下拉框
    openSearchSelect(field) {
      this.select.list = this[field];
      this.select.type = field;
      this.$refs.select.open("bottom");
    },
  },
  created() {
    this.getSearchSelect();
    this.getYearPeriod();

  },
  onShow() {
    // 未登录跳转
    if (!uni.getStorageSync('user')) uni.reLaunch({ url: '/pages/login/index' });
    // 获取登录用户信息
    else {
      this.user = JSON.parse(uni.getStorageSync('user'));
      // 设置默认考评人员
      if (this.user.type == 1) this.form.user1 = { name: this.user.username, id: this.user.id }
    }
  },
};
</script>
<style lang="scss" scoped>
.page {
  .step-1 {
    background-color: #fff;
    padding: 20rpx;
  }

  .step-2 {

    // 标准
    .standard {
      margin-top: 40rpx;

      >.item {
        background-color: #fff;
        margin-bottom: 40rpx;

        >.title {
          display: flex;
          line-height: 80rpx;
          padding: 0 20rpx;
          font-size: 34rpx;
          justify-content: space-between;

          .text {
            width: calc(100% - 120rpx);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .score {
            width: 120rpx;
            color: #f40;
          }
        }

        >.intro {
          padding: 20rpx;
          padding-top: 0;
          font-size: 28rpx;
          color: #333;
        }

        >.switch {
          display: flex;
          justify-content: space-between;
          padding: 20rpx 40rpx;
          align-items: center;
          border-top: 1px solid #eee;
        }

        .upload {
          padding: 20rpx 40rpx;
          padding-top: 0;

          button {
            transform: scale(0.8);
            transform-origin: left;
          }
        }

        .img-list {
          >.item {
            padding: 0rpx 40rpx;
            padding-bottom: 40rpx;

            >.title {
              padding-bottom: 30rpx;
              color: #666;
              font-size: 28rpx;
              display: flex;

              .issue {
                margin-left: 20rpx;
              }
            }

            .img {
              position: relative;

              display: flex;
              justify-content: space-between;
              padding-bottom: 60rpx;

              .left,
              .right {
                position: relative;
                width: 200rpx;
                height: 200rpx;
                border: 1px solid #eee;
                display: flex;
                align-items: center;
                text-align: center;
                justify-content: space-around;
                border-radius: 6rpx;
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;

                .clear {
                  position: absolute;
                  right: -20rpx;
                  top: -20rpx;

                  .uni-icons {
                    color: #999 !important;
                  }
                }

                .name {
                  bottom: -50rpx;
                  position: absolute;
                  left: 0;
                  display: flex;
                  align-items: center;

                  .label {
                    width: 160rpx;
                    font-size: 24rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }

                }
              }

              &::after {
                content: "↔";
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                font-size: 60rpx;
                color: #777;
              }
            }

            .message {
              .item {
                margin-top: 30rpx;
              }
            }

            .switch {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding-top: 20rpx;

              .state {
                display: flex;
                align-items: center;

                .label.error {
                  color: #f40;
                  font-size: 24rpx;
                }
              }
            }
          }

          .score-count {
            padding: 30rpx 40rpx;
            display: flex;
            justify-content: space-between;

            .box {
              display: flex;

              .item {
                display: flex;
                margin-right: 20rpx;
                font-size: 26rpx;

                .red {
                  color: #f40;
                  margin-left: 5rpx;
                }
              }
            }
          }
        }
      }
    }

    .sum-count {
      display: flex;
      justify-content: space-between;
      padding: 20rpx;
      background-color: #fff;
      margin: 40rpx 0;

      overflow: hidden;

      .box {
        display: flex;

        .item {
          display: flex;
          margin-right: 20rpx;
          font-size: 30rpx;
          font-size: 26rpx;

          .red {
            color: #f40;
            margin-left: 5rpx;
          }
        }
      }
    }

    >.handle {
      padding: 20rpx;
      background-color: #fff;
      font-size: 0;

      button {
        margin-right: 20rpx;
      }
    }
  }

  // 下拉选择
  .select {
    display: flex;
    align-items: center;

    .value {
      border: 1px solid #e5e5e5;
      border-radius: 12rpx;
      line-height: 70rpx;
      padding: 0 20rpx;
      color: #999;
      font-size: 24rpx;
      cursor: pointer;
      flex: 1;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .clear {
      margin: 0 20rpx;
      color: #999;
    }
  }

  // 下拉框
  .select-popup {
    height: 60vh;
    padding: 20rpx;
    background-color: #f9f8f8;
    overflow-x: hidden;

    .list {
      background-color: #fff;
      margin-top: 20rpx;
      border-radius: 12rpx;
      overflow: hidden;

      .item {
        display: flex;
        border-bottom: 1px solid #eee;
        line-height: 90rpx;
        padding: 0 20rpx;

        .radio {
          margin-right: 20rpx;
        }

        &:last-child {
          border-bottom: 0px;
        }

        .label {
          font-size: 28rpx;
          margin-top: 5rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }

  // form表单
  ::v-deep .uni-forms {
    .uni-forms-item {
      align-items: center;
    }
  }

  uni-button {
    font-size: 16px;
  }
}
</style>